$(function (){
    // 1-获取地址栏中的搜索关键字
    // 2-根据关键字向后台发送请求，或取对应商品信息
    // 3-把返回的商品信息，渲染到页面
    // 4-点击搜索按钮，获取新输入的关键字，在搜索一遍
    // 5-加载动画：请求发送前动画出现，发送完成后，动画消失

     // 1-获取地址栏中的搜索关键字
    //  location是一个对象
    // location.search url地址栏中，参数部分的数据  ?name=zss
    var key=location.search.split('=')[1];
    console.log(key);
    // 输入关键字是中文，这里在获取的时候会转化为中文字符
    // decodeURI()将中文字符转换为中文
       key=decodeURI(key);
       console.log(key);
    // 2-根据关键字向后台发送请求，或取对应商品信息

    var obj={
      proName:key,
      page:1,
      pageSize:100
    }
    function render(){
      $.ajax({
        type:'get',
        url:'/product/queryProduct',
        data:obj,
        dataType:'json',
        //5-加载动画：请求发送前动画出现，发送完成后，动画消失
        beforeSend:function(){
          $(".lt_product").html($('<div class="loading"></div>'));
        },
        success:function (res){
            // 渲染到页面
            $(".lt_product").html(template('tmp',res));
        }
      });
    }
    render();
    //  4-点击搜索按钮，获取新输入的关键字，在搜索一遍
    //  => 1-判断是否为空
    //  => 2-添加历史记录
    //  => 3-长度控制
    //  => 4-去重
    //  => 5-获取对应商品 渲染
    $('.search_btn').click(function (){
      var txt=$(".search_input").val();
      $(".search_input").val('');
      if(txt.trim()==''){
        mui.toast('请输入关键字');
        return ;
      }
       //  => 2-添加历史记录
      //  获取本地存储
       var arr=JSON.parse(localStorage.getItem('search'));
       console.log(arr);
      // 4-去重
      // 判断数组中是否已经有了相同的数据，如果有，将其删除
      var index=arr.indexOf(txt);
      if(index>-1){
          arr.splice(index,1);
      }
       //  => 3-长度控制
       if(arr.length >=6 ){
         arr.pop();
       }
      //  添加历史记录
      arr.unshift(txt);
      localStorage.setItem('search',JSON.stringify(arr));
      //根据当前输入的关键字搜索商品
      obj.proName=txt;
      render();
    })
})